<template>
  <el-collapse :model-value="['1', '2']">
    <el-form ref="projectManagementInfoRef" :model="form" :rules="rules" label-width="160px" :disabled="route.query.type === 'look'">
      <div class="card-container">
        <el-collapse-item title="项目概况" name="1">
          <el-row :gutter="20" style="margin-top: 15px">
            <el-col :span="8">
              <el-form-item label="申请经费概算(万元)" prop="fundingEstimate">
                <el-input-number v-model="form.fundingEstimate" placeholder="请输入申请经费概算" controls-position="right" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目所需总经费(万元)" prop="totalFundingRequired">
                <el-input-number v-model="form.totalFundingRequired" placeholder="请输入项目所需总经费" controls-position="right" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需水利科技领域" prop="waterTechField">
                <el-input v-model="form.waterTechField" placeholder="请输入所需水利科技领域"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="研究时间区间" prop="time">
<!--                <el-input v-model="form.time" placeholder="请输入项目负责人"/>-->
                <el-date-picker
                    v-model="form.time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="请选择研究开始时间"
                    end-placeholder="请选择研究结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目牵头单位" prop="applicationUnitName">
                <el-input v-model="form.applicationUnitName" placeholder="请输入项目牵头单位" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目协作单位" prop="collaboratingUnits">
                <el-input v-model="form.collaboratingUnits" placeholder="请输入项目协作单位"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容摘要" prop="contentSummary">
                <el-input v-model="form.contentSummary" placeholder="请输入内容摘要"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </div>
      <div class="card-container">
        <el-collapse-item title="项目负责人" name="2">
          <el-row :gutter="20" style="margin-top: 15px">
            <el-col :span="8">
              <el-form-item label="姓名" prop="projectLeaderName">
                <el-input v-model="form.projectLeaderName" placeholder="请输入姓名" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option
                      v-for="dict in sys_user_sex"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务职称" prop="positionTitle">
                <el-input v-model="form.positionTitle" placeholder="请输入职务职称"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号码" prop="idCardNumber">
                <el-input v-model="form.idCardNumber" placeholder="请输入身份证号码"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="major">
                <el-input v-model="form.major" placeholder="请输入专业"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学历" prop="educationLevel">
                <el-select v-model="form.educationLevel" placeholder="请输入学历">
                  <el-option
                      v-for="dict in education_level"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="毕业学校" prop="graduationSchool">
                <el-input v-model="form.graduationSchool" placeholder="请输入毕业学校"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入电子邮箱"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位" prop="workUnit">
                <el-input v-model="form.workUnit" placeholder="请输入工作单位"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话" prop="leaderPhone">
                <el-input v-model="form.leaderPhone" placeholder="请输入联系电话" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; justify-content: flex-end"  v-if="route.query.type !== 'look'">
              <el-form-item>
                <el-button type="primary" @click="onSubmit(0)">保存草稿</el-button>
                <el-button type="primary" @click="onSubmit(1)">下一步</el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </div>
    </el-form>
  </el-collapse>
</template>

<script setup>
import {addOrUpdateProjectOverview, projectSituation, addProject, getProject} from '@/api/departmentWaterResources/project.js'
import {useRoute} from "vue-router";
import useProjectStore from '@/store/modules/project.js'
import useUserStore from '@/store/modules/user.js'
import {parseTime} from '@/utils/ruoyi.js'

const route = useRoute();
const projectStore = useProjectStore();
const userStore = useUserStore();
const {proxy} = getCurrentInstance();
const emit = defineEmits(['activeNext'])
const {project_type, project_app_process_state, sys_user_sex, education_level} = proxy.useDict('project_type', 'project_app_process_state', 'sys_user_sex', 'education_level');
const projectManagementInfoRef = ref()

const data = reactive({
  form: {},
  rules: {
    fundingEstimate: [{required: true, message: '请输入申请经费概算(万元)', trigger: 'blur'}],
    totalFundingRequired: [{required: true, message: '请输入项目所需总经费(万元)', trigger: 'blur'}],
    waterTechField: [{required: true, message: '请输入所需水利科技领域', trigger: 'change'}],
    time: [{required: true, message: '请输入研究时间区间', trigger: 'blur'}],
    applicationUnitName: [{required: true, message: '请输入项目牵头单位', trigger: 'blur'}],
    projectLeaderName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
    sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
    positionTitle: [{required: true, message: '请输入职务职称', trigger: 'blur'}],
    idCardNumber: [{required: true, message: '请输入身份证号码', trigger: 'change'}],
    major: [{required: true, message: '请输入专业', trigger: 'change'}],
    educationLevel: [{required: true, message: '请输入学历', trigger: 'change'}],
    graduationSchool: [{required: true, message: '请输入毕业学校', trigger: 'change'}],
    workUnit: [{required: true, message: '请输入工作单位', trigger: 'change'}],
    leaderPhone: [{required: true, message: '请输入联系电话', trigger: 'change'}]
  }
});
const {form, rules} = toRefs(data);

const onSubmit = (type) => {
  form.value.researchStartTime = parseTime(form.value.time[0], '{y}-{m}-{d}')
  form.value.researchEndTime = parseTime(form.value.time[1], '{y}-{m}-{d}')
  projectManagementInfoRef.value.validate(valid => {
    if (valid) {
      addOrUpdateProjectOverview(form.value).then(response => {
        if (type === 0) {
          proxy.$modal.msgSuccess("保存成功");
        } else {
          emit('activeNext', 'tab3')
        }
      });
    }
  })
}

function onCancel() {
  const obj = { path: "/project/infoManagement" };
  proxy.$tab.closeOpenPage(obj);
}

function init() {
  let id = ''
  if (route.query.type === 'add') {
    id = projectStore.getProjectData.projectId
  } else {
    id = route.query.id
  }
  projectSituation(id).then(res => {
    form.value = res.data;
    form.value.time = [form.value.researchStartTime, form.value.researchEndTime]
    if (!form.value.applicationUnitId) {
      form.value.applicationUnitId = userStore.getUserInfo.myDept.deptId
      form.value.applicationUnitName = userStore.getUserInfo.myDept.deptName
    }
  })
}

init()

defineExpose({
  projectManagementInfoRef
})

</script>

<style scoped lang="scss">
.card-container :deep(.el-collapse-item__content) {
  padding: 0;
}
</style>
